<template>
  <el-container class="root-container">
    <el-header class="root-header" :height="headerHeight">
      <headbar @login="showLogin = true" />
    </el-header>
    <el-aside
      v-if="clientWidth >= 1000"
      :width="siderWidth"
      class="root-sider"
      :style="{
        top: headerHeight,
        bottom: footerHeight,
      }"
    >
      <el-scrollbar
        style="height: 100%"
        :wrapStyle="[{ 'overflow-x': 'hidden' }]"
      >
        <navbar @login="showLogin = true" />
      </el-scrollbar>
    </el-aside>
    <el-main
      class="root-main"
      :style="{
        marginTop: headerHeight,
        marginBottom: footerHeight,
        marginLeft: siderWidth,
      }"
    >
      <transition name="el-fade-in">
        <router-view />
      </transition>
    </el-main>
    <el-footer class="root-footer" :height="footerHeight">
      <footbar />
    </el-footer>
    <login-view v-if="showLogin" @close="showLogin = false" />
  </el-container>
</template>

<script>
import navbar from "@/views/Navigation";
import headbar from "@/views/Header";
import footbar from "@/views/Footer";
import loginView from "@/views/Login";
export default {
  components: {
    navbar,
    headbar,
    footbar,
    loginView,
  },
  data() {
    return {
      showLogin: false,
      headerHeight: "60px",
      // siderWidth: "220px",
      siderMinWidth: 180,
      siderWidthRatio: 0.2,
      footerHeight: "20px",
    };
  },
  computed: {
    clientWidth() {
      return this.$store.state.view.body.size.width;
    },
    clientHeight() {
      return this.$store.state.view.body.size.height;
    },
    siderWidth() {
      if (this.clientWidth < 1000) return 0;
      if (this.clientWidth * this.siderWidthRatio < this.siderMinWidth)
        return this.siderMinWidth.toString() + "px";
      return (this.siderWidthRatio * 100).toString() + "vw";
    },
  },
  methods: {
    getBodySize() {
      this.$store.commit("view/SET_BODY_SIZE", {
        width: document.body.clientWidth,
        height: document.body.clientHeight,
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  mounted() {
    this.getBodySize();
    let self = this;
    // setInterval(() => {
    //   self.getBodySize();
    // }, 100);
    window.onresize = () => {
      self.getBodySize();
    };
  },
};
</script>

<style scoped>
.root-container {
  height: 100vh;
}
.root-main {
  padding: 0;
  margin-top: 60px;
  margin-left: 240px;
  /* z-index: 100; */
}
.root-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}
.root-sider {
  background: #fff;
  border-right: 1px solid #eee;
  position: fixed;
  left: 0;
  z-index: 300;
}
.root-footer {
  background: #fff;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 20px;
  font-size: 10px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
  z-index: 200;
}
</style>
